<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图上的标记&弹窗&事件</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css"/>
    <script src="../leaflet/leaflet.js"></script>
    <style>

    </style>

</head>
<body>
<!--<div>
    坐标:
    <input id="latlng" type="text" readonly="readonly">
</div>-->
<div id="mapid" style="width: 960px; height: 544px;"></div>

<script>

    // 设置地图坐标，以及地图缩放等级
    var mymap = L.map('mapid').setView([43.81248, 87.60052], 15);

    // 加载高德地图接口
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' + 'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ["1", "2", "3", "4"]}).addTo(mymap);

    // 在地图上某个点添加一个标记
    var marker = L.marker([43.81248, 87.60052]).addTo(mymap);
    // 做一个弹窗提示当前位置
    marker.bindPopup("当前位置").openPopup();

    // 在地图上某个点画一个圆
    var circle = L.circle([43.80842, 87.58833], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 250
    }).addTo(mymap);
    // 给圈出来的区域加弹窗
    circle.bindPopup("I am a circle.");

    // 根据坐标画一个多边形
    var polygon = L.polygon([
        [43.81762, 87.6173],
        [43.81205, 87.61056],
        [43.80542, 87.6191]
    ]).addTo(mymap);
    polygon.bindPopup("I am a polygon.");

    // 自定义弹窗
    /*var popup = L.popup()
            .setLatLng([43.81635, 87.59331])
            .setContent("这是一个自定义的弹窗.")
            .openOn(mymap);*/

    // 设置点击事件
    var popup = L.popup();
    function onMapClick(e) {
        popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
    }
    mymap.on('click', onMapClick);


</script>
</body>
</html>
